const target = document.querySelector('#drag_img')

const throttle = (fn, time) => {
    let timer = null
    return (...ags) => {
        if (timer) return
        timer = setTimeout(() => {
            fn.apply(this, ags)
            timer = null
        }, time)
    }
}

const targetDragMove = throttle((val) => {
    const rect = target.getBoundingClientRect()
    console.log('移动', val.clientX, val.clientY, rect )
    target.style.transform = `translate(${val.clientX - rect.width / 2 + 'px'},${val.clientY - rect.height / 2 + 'px'})`
}, 10)

const targetDragStart = (val) => {
    /** 重要 一定要阻止默认事件 */
    val.preventDefault()
    // 将mousemove事件绑定到document上，避免鼠标移动过快脱离元素导致中断
    document.addEventListener('mousemove', targetDragMove)
    // 添加mouseup事件到document上
    document.addEventListener('mouseup', targetDragEnd)
}

const targetDragEnd = (val) => {
    // 从document上移除事件监听器
    document.removeEventListener('mousemove', targetDragMove)
    document.removeEventListener('mouseup', targetDragEnd)
}

const targetInit = () => {
    target.addEventListener('mousedown', targetDragStart)
}

targetInit()


/**
 * 拖拽元素
    小结：
    1. 给拖拽元素绑定mousedown事件，作为拖拽的触发
        1.1. 阻止默认行为，因为默认行为会打开图片
    2. 给documen绑定mousemove和mouseup事件，作为拖拽的移动和结束 （不绑定在target，而绑定在document，这样可以防止鼠标移动过快脱离元素导致中断）
    3. 获取鼠标移动的距离，并设置元素移动的距离 （target.style只能获取到行内样式，不能读取到样式表中的样式，所以读取target的宽高需要使用 getBoundingClientRect() 方法）
 */